// Apple Watch Ultra
$device-titanium: #D6CCC2;
$device-titanium-dark: darken($device-titanium, 25%);
$device-panel: #0d0d0d;

.device-apple-watch-ultra {
  height: 380px;
  width: 360px;

  .device-frame {
    background: $device-panel;
    border-radius: 92px;
    box-shadow: inset 0 0 12px 1px rgba($device-panel, .75), inset 0 0 0 6px $device-titanium, inset 0 0 0 12px $device-titanium;
    height: 380px;
    margin: 0 20px;
    padding: 38px;
    position: relative;
    width: 320px;

    &::before {
      border: 1px solid lighten($device-titanium, 15%);
      border-radius: 80px;
      box-shadow: 0 0 6px rgba($device-panel, .2), inset 0 0 4px 1px lighten($device-titanium, 15%), inset 0 0 0 10px $device-titanium;
      content: "";
      height: 356px;
      left: 12px;
      position: absolute;
      top: 12px;
      width: 296px;
    }
  }

  // 410-by-502-pixel resolution
  .device-screen {
    border: 2px solid lighten($device-panel, 2%);
    border-radius: 62px;
    height: 304px;
    width: 244px;
  }

  .device-header {
    background: radial-gradient(circle at center, $device-titanium 50%, lighten($device-titanium, 10%) 85%, $device-titanium-dark 100%);
    border-radius: 4px 4px 4px 4px / 8px 4px 4px 8px;
    box-shadow: inset 0 0 16px 1px rgba($device-panel, .5), -8px 0 4px rgba($device-panel, .2), inset 4px 0 4px rgba($device-panel, .2);
    height: 214px;
    margin-top: -107px;
    position: absolute;
    right: 4px;
    top: 50%;
    width: 18px;
    z-index: 1;

    &::before {
      border-radius: 8px 4px 4px 8px / 32px 4px 4px 32px;
      box-shadow: -10px 0 8px rgba($device-panel, .2);
      content: "";
      height: 194px;
      margin-top: -97px;
      position: absolute;
      right: 8px;
      top: 50%;
      width: 12px;
    }
  }

  .device-btns {
    background: $device-titanium;
    border-left: 1px solid darken($device-titanium-dark, 30%);
    border-radius: 8px 6px 6px 8px / 20px 6px 6px 20px;
    box-shadow: inset 8px 0 8px 0px darken($device-titanium-dark, 25%), inset -2px 0 6px $device-titanium-dark;
    height: 72px;
    position: absolute;
    right: 1px;
    top: 108px;
    width: 24px;
    z-index: 9;

    &::after {
      background: $device-titanium;
      border-radius: 2px 4px 4px 2px / 20px 8px 8px 20px;
      box-shadow: inset -2px 0 2px 0 darken($device-titanium-dark, 20%), inset -6px 0 18px $device-titanium-dark;
      content: "";
      height: 78px;
      right: 0;
      position: absolute;
      top: -4px;
      width: 6px;
    }
    
    &::before {
      background: $device-titanium;
      border-radius: 20%;
      box-shadow: 0 -30px rgba($device-titanium-dark, .5),
                  0 -27px $device-titanium,
                  0 -25px darken($device-titanium-dark, 10%),
                  0 -21px rgba($device-titanium-dark, .5),
                  0 -18px $device-titanium,
                  0 -16px darken($device-titanium-dark, 10%),
                  0 -12px rgba($device-titanium-dark, .5),
                  0 -9px $device-titanium,
                  0 -7px darken($device-titanium-dark, 10%),
                  0 -3px rgba($device-titanium-dark, .5),
                  0 0 $device-titanium,
                  0 2px darken($device-titanium-dark, 10%),
                  0 6px rgba($device-titanium-dark, .5),
                  0 9px $device-titanium,
                  0 11px darken($device-titanium-dark, 10%),
                  0 15px rgba($device-titanium-dark, .5),
                  0 18px $device-titanium,
                  0 20px darken($device-titanium-dark, 10%),
                  0 24px rgba($device-titanium-dark, .5),
                  0 27px $device-titanium,
                  0 29px darken($device-titanium-dark, 10%);
      content: "";
      height: 3px;
      margin-top: -2px;
      position: absolute;
      right: 2px;
      top: 50%;
      width: 16px;
      z-index: 9;
    }
  }

  .device-stripe {
    background: lighten($device-titanium, 5%);
    border-radius: 2px 8px 8px 2px;
    box-shadow: 0 14px 0 $device-titanium,
                0 28px 0 $device-titanium;
    height: 10px;
    left: 19px;
    position: absolute;
    top: 98px;
    width: 4px;
    z-index: 1;
  }

  .device-power {
    background: $device-titanium;
    border-radius: 2px 4px 4px 2px / 2px 8px 8px 2px;
    box-shadow: inset 0 0 2px 1px $device-titanium-dark;
    height: 72px;
    right: 1px;
    position: absolute;
    top: 212px;
    width: 4px;
  }

  .device-home {
    background: #F18F42;
    border: 1px solid darken(#F18F42, 25%);
    border-radius: 2px 4px 4px 2px / 2px 8px 8px 2px;
    box-shadow: inset 0 0 1px 1px darken(#F18F42, 5%);
    height: 106px;
    left: 19px;
    position: absolute;
    top: 162px;
    width: 4px;
    z-index: 1;
  }
}